import {Form, Input, Modal} from 'antd';
import React from 'react';
import type {AddItem} from '../data';

interface AddFormProps {
  onSubmit: (values: AddItem) => void;
  onCancel: (flag?: boolean) => void;
  modalVisible: boolean;
}

const formItemLayout = {
  labelCol: {
    xs: {span: 4},
    sm: {span: 4},
  },
  wrapperCol: {
    xs: {span: 20},
    sm: {span: 20},
  },
};

const AddForm: React.FC<AddFormProps> = props => {
  const [form] = Form.useForm();

  const {
    onSubmit: handleAdd,
    onCancel: handleAddModalVisible,
    modalVisible: addModalVisible,
  } = props;

  const onModalOk = async () => {
    const fieldsValue = (await form.validateFields()) as AddItem;
    handleAdd(fieldsValue);
  };

  return (
      <Modal
          title='新建管理员'
          visible={addModalVisible}
          destroyOnClose
          width={800}
          onOk={() => onModalOk()}
          onCancel={() => handleAddModalVisible(false)}
          afterClose={() => handleAddModalVisible()}
          okText='确定'
          cancelText='取消'
      >
        <Form {...formItemLayout} form={form}>
          <Form.Item name='name' label='管理员名称' rules={[{required: true, message: '必填'}]}>
            <Input/>
          </Form.Item>
          <Form.Item name='userName' label='管理员账户' rules={[{required: true, message: '必填'}]}>
            <Input/>
          </Form.Item>
          <Form.Item name='password' label='管理员密码' rules={[{required: true, message: '必填'}]}>
            <Input type='password'/>
          </Form.Item>
        </Form>
      </Modal>
  );
};

export default AddForm;
